<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-07 15:02:07
 * @LastEditTime : 2022-09-08 15:43:44
 * @FilePath     : \侦听器\watch\组合式API用法\基础示例\APP.vue
-->
// src/APP.vue


<template>
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</div>
</template>

<script lang="ts">
import axios from 'axios'
import { defineComponent, reactive, toRefs, watch } from 'vue'

export default defineComponent({
  name:"APP",
  setup() {
    const msg = reactive({
      question: '',
      answer: 'Questions usually contain a question mark. ;-)'
    })

    const getAnswer = () => {
      msg.answer = 'Thinking...'
      axios
        .get('https://yesno.wtf/api')
        .then(response => {
          msg.answer = response.data.answer
        })
        .catch(error => {
          msg.answer = 'Error! Could not reach the API. ' + error
        })
    }
    /**
     * 第一个参数：侦听器的来源
     * 第二个参数：发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理
     * 的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用
     * 第三个参数：对象选项。
     *    immediate：在侦听器创建时立即触发回调
     *    deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调
     *    flush：调整回调函数的刷新时机
     *    onTrack / onTrigger：调试侦听器的依赖
     */
    watch(
        () => msg.question,
        async (newQuestion, oldQuestion) => {
          newQuestion.indexOf('?') > -1 ? await getAnswer() : ''
        }
      )


    return {
      ...toRefs(msg),
    }
  }

})
</script>